/* 第一部分 */
.seat-legend li {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	margin-right: 24px;
}

li {
	list-style: none;
}
ul {
	margin: 0;
	padding: 0;
}
.seat-legend .i-normal {
	background-position: 0 0;
}
.seat-legend {
	-webkit-overflow-scrolling: touch;
	align-items: center;
	color: var(--xseat-color-fg);
	display: flex;
	font-size: 10px;
	height: 34px;
	justify-content: center;
	overflow-x: scroll;
	overflow-y: hidden;
	position: relative;
	white-space: nowrap;
	width: 100%;
	z-index: 20;
}

.element.style {
	background-image: url(https://gw.alicdn.com/tfs/TB1t5BlEeL2gK0jSZPhXXahvXXa-220-464.png);
}

.seat-legend .i-sold {
	background-position: 0 -40px;
}
.seat-legend i {
	background-size: 55px;
}
.seat-legend i,
.seat-legend img {
	display: block;
	height: 16px;
	margin-right: 5px;
	width: 17px;
}


.element.style {
	background-image: url(https://gw.alicdn.com/tfs/TB1t5BlEeL2gK0jSZPhXXahvXXa-220-464.png);
}


.seat-legend .i-best-area {
	background-position: 0 -100px;
}
.hall {
	color: var(--xseat-color-fg-subtle);
	display: flex;
	font-size: 11px;
	height: 42px;
	justify-content: center;
	position: relative;
	text-align: center;
}


::-webkit-scrollbar {
	display: none;
}

.hall .screen,
.hall .screen-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hall .screen {
	align-items: center;
	background: url(https://gw.alicdn.com/tfs/TB1ktVSeBCw3KVjSZR0XXbcUpXa-882-113.png) no-repeat top;
	background-size: 100% auto;
	display: flex;
	justify-content: center;
	left: 50%;
	margin-left: -113px;
	max-width: 226px;
	padding: 15px 15px 0;
	position: absolute;
	top: 5px;
	width: 226px;
}



:root,
[data-color-mode=light],
page {
	color-scheme: light;
}
*,
:after,
:before {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	box-sizing: border-box;
}

.input_control{
  width:360px;
  margin:20px auto;
}







/* 第二部分 */

input{
	height: 50px;
	width: 50px;
	
}
.div1{
	height: 700px;
	width: 1000px;
	background-color: #f5f6f8;
	display: flex;/* 弹性布局 */
	flex-direction: column;/* 向下排 */
	justify-content: center;
	
	justify-content: space-between;
	margin: auto;
	
	
}
.div2{
	height:50px ;
	width:1000px ;
	
	
	margin: 3px;
	display: flex;

	justify-content: center;/* 两端对齐,中间间隔相同 */
		
}




/* 第三部分 */
.main{
	width: 800px;
	height: 20px;
	/* background-color: pink; */
	display: flex;/* 首先要把格式改成弹性布局 */
	/* flex-direction: column; *//* 改垂直 */
	/* flex-wrap: wrap; */
	/* flex-grow: ; */
	/* justify-content: center; *//* 居中 */
	/* justify-content: space-around; *//* 水平对齐形式 */
	/* align-items: flex-end; *//* 垂直方向水平对齐 */
	/* align-content: center; *//* 使他放在一起 */
	flex:0.25;
	
	
}
.main .item1{/* 注意格式 */
	width: 00px;
	height: 20px;
	/* background-color:red */;
	border: 0px solid gainsboro;
	flex: 5;/* 使用弹性布局 */
	font-size: 10px;
}
.main .item2{
	width: 80px;
	height: 20px;
	/* background-color:khaki; */
	border: 0px solid red;
	flex: 4;
	border: 0px solid gainsboro;
}
.main .item3{
	width: 50px;
	height: 20px;
	/* background-color:blue; */
	border: 0px solid red;
	flex: 1;
	border: 0px solid gainsboro;
	font-size: 10px;
}

	
.divone{
	width: 800px;
	height: 475px;
	background-color: whitesmoke;
	margin: auto;
	display: flex;
	flex-direction: column;
	border-radius: 6%;
	
	

	


}
    .niceButton3 {
        background-color: snow;
        border-radius: 25px;
        border: none;
        color: black;
        padding: 0.1px 30px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 1px 1px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
      }
      .niceButton3:hover {
        background-color: #fff7f9;
        color: #000000;
        border: 1px solid #ccc;
      }

.divtwo{
	width: 800px;
	height: 200px;
	display: flex;
/* 	background-color: royalblue; */
	flex: 3;
	justify-content: space-around;
	border-radius: 6%;
	
}
.p.one{
	flex:0;
	
	
}
li {
	margin: 0px;
	padding: 0;
	float: left;/* 使列表水平 */
	margin-left:10px;/* 文字间的间隔 */
}

ul {
	list-style-type: none;/* 去掉点点 */
	display: flex;
	
	
}
.three{
	/* background-color: grey; */
	border-radius: 7px;
	width: 50px;
	height: 30px;
	border-color: #ccc;
	font-size: 10px;
	align-content: center;
}
/* 悬停添加箭头图标 */
   .niceButton5 {
        display: inline-block;
        border-radius: 20px;
        background-color: #f21ba9;
        border: none;
        color: #ffff;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        padding: 18px;
        width: 800px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
        vertical-align: middle;
      }
      .niceButton5 span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }
      .niceButton5 span::after {
        content: ">";
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
      }
      .niceButton5:hover span {
        padding-right: 30px;
      }
      .niceButton5:hover span::after {
        opacity: 1;
        right: 0;
      }


.ends {
    text-align: center; /* 让按钮水平居中 */
}

.end{
	flex: 0.1;
}
body{
	background-color: #f5f6f8
	;
}
div.round3 {

	border-radius: 12px;
	border-width: 1px;
	width: 25px;
	height: 675px;
	background-color: #abacad;
	display: flex;
	/* 弹性布局 */
	flex-direction: column;
	/* 向下排 */

	text-align: center;
	color: white;
	justify-content: space-between;
	margin: auto;
	position: absolute;
	left: 20px;
	top: 100px;
	align-items: center;

}
/* 隐藏默认的复选框 */
.custom-checkbox input[type="checkbox"] {
    display: none;
	
}

/* 自定义的样式 */
.custom-checkbox label {
    display: inline-block;
    width: 50px; /* 设定多选框的宽度 */
    height: 50px; /* 设定多选框的高度 */
    background-image: url(../img/4.webp); /* 设置默认背景图片 */
    background-size: cover;
    cursor: pointer;
}


/* 样式化外部容器 */
.checkbox-container {
  display: flex;
  justify-content: space-between;
  width: 50px;
  height: 50px;
  
 
}

.tag {
  background-color: white;
  color: black;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 20px 20px;
  margin: 10px;
  display: inline-block;
  flex-direction: column;
  display: flex;
}

.tag i:hover {
  color: darkred;
}
.end1{
	width: 800px;
	height: 100px;
	background-color: whitesmoke;
	margin: auto;
	display: flex;
	
	border-radius: 6%;
	
}

